import React, { Component } from 'react'
// redux获取数据所用 高阶组件
import { connect } from 'react-redux'
// 组件  在taro之react开发中，所有的小程序组件都不能直接用，必须先引用taro定义的组件
// 为何要使用它定义组件名，react规定组件首字母大写，第2解决跨平台问题
import { View, Text, RichText } from '@tarojs/components'
// taro提供类似于wx对象功能
import Taro, { getCurrentInstance } from '@tarojs/taro'

// 样式
import './index.scss'

class Index extends Component {
  // 组件状态
  state = {
    id: 0,
    info: {}
  }

  componentWillMount() {
    // 获取小程序中路由参数数据
    let id = getCurrentInstance().router.params.id

    this.setState({
      id
    })

    // 网络请求
    Taro.request({
      url: `http://localhost/api/v1/news/${id}`,
      success: res => {
        this.setState({
          info: res.data.data
        })
      }
    })


    // 设置小程序中的导航文字
    Taro.setNavigationBarTitle({
      title: '你好世界'
    })

    // tabbar加小红点
    Taro.showTabBarRedDot({
      index: 0
    })
    // tabbar右上角加文字
    Taro.setTabBarBadge({
      index: 1,
      text: '2'
    })

  }

  // 自定义分享
  onShareAppMessage(){
    return {
      title:'你好世界',
      path:'/pages/detail/index?id=1'
    }
  }

  render() {
    return (
      <>
        {
          !this.state.info.id ? <View>数据请求中...</View> : (
            <View className="index-container">
              {/* <RichText nodes={this.state.info.body} /> */}
              <parser html={this.state.info.body} />
            </View>
          )
        }
      </>
    )
  }
}

export default Index

